{%extends 'layout.html'%}
{%block body%}
<link type='text/css' rel='stylesheet' href="{{url_for('static', filename='css/pagination.css') }}"/>
<script type='text/javascript' src="{{url_for('static', filename='js/jquery.pagination.js') }}"></script>
<script>
	$(function(){
		$('.invite-panel').hide();
		$('#panel-1').show();
		$( "#response-type" ).buttonset();
		$('#radio1').click(function(){
			$('.invite-panel').hide();
			$('#panel-1').show();
		});
		$('#radio2').click(function(){
			$('.invite-panel').hide();
			$('#panel-2').show();
		});
		$('#radio3').click(function(){
			$('.invite-panel').hide();
			$('#panel-3').show();
		});
		$('#radio4').click(function(){
			$('.invite-panel').hide();
			$('#panel-4').show();
		});
		var users_per_page = 2;
		$('#panel-1 .page-container').pagination($('#panel-1 .hidden-content .user-block').length, {
			items_per_page : users_per_page,
			load_first_page: true,
			callback : function(index, container){			
				container.append('<div class="clear"></div>');
				var left = index * users_per_page;
				var right = (index + 1) * (users_per_page);				
				var new_content = $('#panel-1 .hidden-content .user-block').slice(left, right).clone().removeClass('hide');
                container.append(new_content);
										
			},
		});
		$('#panel-2 .page-container').pagination($('#panel-2 .hidden-content .user-block').length, {
			items_per_page : users_per_page,
			load_first_page: true,
			callback : function(index, container){			
				container.append('<div class="clear"></div>');
				var left = index * users_per_page;
				var right = (index + 1) * (users_per_page);				
				var new_content = $('#panel-2 .hidden-content .user-block').slice(left, right).clone().removeClass('hide');
                container.append(new_content);
										
			},
		});
		$('#panel-3 .page-container').pagination($('#panel-3 .hidden-content .user-block').length, {
			items_per_page : users_per_page,
			load_first_page: true,
			callback : function(index, container){			
				container.append('<div class="clear"></div>');
				var left = index * users_per_page;
				var right = (index + 1) * (users_per_page);				
				var new_content = $('#panel-3 .hidden-content .user-block').slice(left, right).clone().removeClass('hide');
                container.append(new_content);
										
			},
		});
		$('#panel-4 .page-container').pagination($('#panel-4 .hidden-content .user-block').length, {
			items_per_page : users_per_page,
			load_first_page: true,
			callback : function(index, container){			
				container.append('<div class="clear"></div>');
				var left = index * users_per_page;
				var right = (index + 1) * (users_per_page);				
				var new_content = $('#panel-4 .hidden-content .user-block').slice(left, right).clone().removeClass('hide');
                container.append(new_content);
										
			},
		});
	});
</script>
<div id="response-type">
	<input type="radio" id="radio1" name="radio" checked="checked"/><label for="radio1">参加</label>
	<input type="radio" id="radio2" name="radio" /><label for="radio2">可能参加</label>
	<input type="radio" id="radio3" name="radio" /><label for="radio3">不参加</label>
	<input type="radio" id="radio4" name="radio" /><label for="radio4">未处理</label>
</div>
<div id='panel-1' class='invite-panel'>
	<div class='page-container'></div>
	<div class='hidden-content'>
		{%for invite in activity.attended_invites%}
			<div class='user-block hide'>
				{{invite.participant.name}}
			</div>
		{%endfor%}
	</div>
</div>
<div id='panel-2' class='invite-panel'>
	<div class='page-container'></div>
	<div class='hidden-content'>
		{%for invite in activity.maybe_attend_invites%}
			<div class='user-block hide'>
				{{invite.participant.name}}
			</div>
		{%endfor%}	
	</div>
</div>
<div id='panel-3' class='invite-panel'>
	<div class='page-container'></div>
	<div class='hidden-content'>
		{%for invite in activity.declined_invites%}
			<div class='user-block hide'>
				{{invite.participant.name}}
			</div>		
		{%endfor%}	
		</div>
</div>
<div id='panel-4' class='invite-panel'>
	<div class='page-container'></div>
	<div class='hidden-content'>
		{%for invite in activity.unhandled_invites%}
			<div class='user-block hide'>
				{{invite.participant.name}}
			</div>
		{%endfor%}		
	</div>
</div>
<a href='/activity/detail/{{activity.id}}'>返回</a>
{%endblock%}
